<template>
    <el-upload ref="upload" v-bind="$attrs" v-on="$listeners"   class="upload-demo"
          :action="$attrs.action" 
          :multiple="$attrs.multiple" 
          :auto-upload="$attrs.autoUpload"
          :accept="($attrs.accept ? $attrs.accept :accept)"
          :on-preview="handlePictureCardPreview" 
          :on-remove="handleRemove"
          :on-change="handProgress"
          :show-file-list="false"
          :limit="$attrs.limit"
          >
          <el-input v-model="fieldValue"  style="width: 70%; float: left; margin-right: 10px;" :disabled="true" ></el-input>

          <el-button slot="trigger" size="medium" type="primary" >上传视频</el-button>
          <el-button size="medium" type="warning" style="margin-left: 10px" @click="checkInput">网络视频</el-button>
          <el-button size="medium" type="success" @click="selectPicture">选择视频</el-button>
          <div slot="tip" class="xdh-form-upload__tip">{{tipText}}最多上传{{$attrs.limit}}张</div>
          <div class="avatar-uploader" style="margin-top:10px;">
              <el-progress v-if="percentage > 0" :percentage="percentage" status="success"></el-progress>
              <div class="el-upload el-upload--text" style="max-width:500px;max-height:400px;">
                  <video v-if="imageUrl.length"  :src="imageUrl[0].url" controls="controls"></video>
                  <i v-else class="el-icon-video-play avatar-uploader-icon"></i>
              </div>
          </div> 
      </el-upload>
</template>
<script>
export default {
    name:'uploadVideo',
    props: {
      value: {
        type: [String,Number],
        default() {
          return ''
        }
      },
      uploadText: {
        type: String,
        default: '点击上传'
      },
      selectText: {
        type: String,
        default: '选取文件'
      },
      submitText: {
        type: String,
        default: '上传到服务器'
      },
      tipText: {
        type: String,
        default: '只能上传mp4文件，且不超过10M。'
      },
      size: {
        type: String
      },
      imageUrl: {
        type: Array,
        default:()=>[]
      },
      percentage:{
        type:Number,
        default:0
      }
    },
    data(){
        return {
            accept:'.mp4'
        }
    },
    computed:  {
      fieldValue: {
        get() {
          return this.value;
        },
        set(val) {
         
        }
      }
    },
    methods: {
        handlePictureCardPreview(file) {
            this.$emit('handlePictureCardPreview',file);
        },
        handleRemove(file,fileList){
            this.$emit('handleRemove',file,fileList);
        },
        handProgress(file, fileList){
          file.raw.flag = 2;
          this.$emit('handProgress',file,fileList);
        },
        selectPicture(){
          this.$emit('selectPicture');
        },
        checkInput() {
          this.$emit("checkInput");
        }
    }
}
</script>


<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .uplode-input-singleImage{
        text-indent: 99999px;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom: 0px;
        z-index: 100;
        opacity: 0;
    }
</style>